function range(start, end) {
  this._start = start
  this._end = end
  this.tmp = this._start
  this.tmpAsync = this._start
  this[Symbol.iterator] = function * () {
    // for (let tmp = this._start; tmp <= this._end; tmp++) {
    //     yield tmp;
    // }
    while (this.tmp < this._end) {
      yield this.tmp
      this.tmp++
    }
  }
  this[Symbol.asyncIterator] = async function * () {
    // for (let value = this._start; value <= this._end; value++) {

    //     // 在 value 之间暂停一会儿，等待一些东西
    //     await new Promise(resolve => setTimeout(resolve, 1000));

    //     yield value;
    // }
    while (this.tmpAsync < this._end) {
      yield this.tmpAsync
      await new Promise(resolve => setTimeout(resolve, 1000))
      this.tmpAsync++
    }
  }
}
// eslint-disable-next-line new-cap
const r = new range(3, 7)

async function test() {
  for await (const value of r) {
    console.log(value)
  }
}
test()
for (const i of r) {
  console.log('s', i) // sy-log
}

class TimeFormatted extends HTMLElement { // (1)
  render() {
    const date = new Date(this.getAttribute('datetime') || Date.now())

    this.innerHTML = new Intl.DateTimeFormat('default', {
      year: this.getAttribute('year') || undefined,
      month: this.getAttribute('month') || undefined,
      day: this.getAttribute('day') || undefined,
      hour: this.getAttribute('hour') || undefined,
      minute: this.getAttribute('minute') || undefined,
      second: this.getAttribute('second') || undefined,
      timeZoneName: this.getAttribute('time-zone-name') || undefined
    }).format(date)
  }
  connectedCallback() {
    if (!this.rendered) {
      this.render()
      this.rendered = true
    }
  }
  static get observedAttributes() {
    return ['datetime', 'year', 'month', 'day', 'hour', 'minute', 'second', 'time-zone-name']
  }
  attributeChangedCallback(name, oldValue, newValue) {
    // console.log('change', name, oldValue, newValue); //sy-log
    this.render()
  }
}

customElements.define('time-formatted', TimeFormatted) // (2)

// eslint-disable-next-line no-undef
setInterval(() => { elem.setAttribute('datetime', new Date()) }, 1000)
